<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/date_input.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/jquery.date_input.pack.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<a class="navbar-header" href="">
			<img src="../images/ph.png" alt="">
			<div>
				<span>Nifty</span>
			</div>
		</a>
	</header>
	<div class="boxed">
		<div class="menu-wrap">
			<ul>
				<li class="list-header">Navigation</li>
				<li class="active-link">
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				<li/>
				<li class="list-divider"></li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
				<li class="list-header">Components</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="content-container">
			<div class="common-tit">
				<h2>商品详情</h2>
				<span>商品系统 > 商品详情</span>
			</div>
			<div class="cur-box">
				<h3>
					<span>基本信息</span>
				</h3>
				<div class="cur-basic clearfix">
					<div class="ads-info clearfix">
						<div class="camera">
							<div class="upl">本地上传</div>
						</div>
						<ul class="pro-box">
							<li>
								<div class="list-box pro-curr pro-req" choice="mandatory">
									<div class="downbtn">
										<span>课程商品</span>
										<em></em>
									</div>
									<ul class="dropdown-menu">
										<li class="cho-tit">课程商品</li>
										<li>课程商品</li>
										<li>周边商品</li>
									</ul>
								</div>
								<b>请选择</b>
							</li>
							<li class="pro-cu">
								<div class="list-box commodity-type pro-req pro-i" choice="mandatory">
									<div class="downbtn">
										<span>商品类型</span>
										<em></em>
									</div>
									<ul class="dropdown-menu">
										<li class="cho-tit">商品类型</li>
										<li data_id="1">次卡</li>
										<li data_id="2">年卡</li>
										<li data_id="3">月卡</li>
										<li data_id="4">售卖课程1</li>
										<li data_id="5">售卖课程2</li>
									</ul>
								</div>
								<b>请选择</b>
							</li>
							<li class="pro-per">
								<div class="list-box pro-i" choice="mandatory">
									<div class="downbtn">
										<span>商品类型</span>
										<em></em>
									</div>
									<ul class="dropdown-menu">
										<li class="cho-tit">商品类型</li>
										<li data_id="111">自定义</li>
									</ul>
								</div>
								<b>请选择</b>
							</li>
							<li>
								<input id="proName" type="text" placeholder="名称" class="required">
							</li>
							<li class="pro-cu spec">
								<input id="proSpec" type="text" placeholder="商品规格" class="required">
								<i>次</i>
							</li>
							<li>
								<input id="proPrice" type="text" placeholder="价格" class="required" onkeyup="intNum(this)">
								<i>元</i>
							</li>
							<li>
								<input id="proStock" type="text" placeholder="库存-数量限制（可不填）" onkeyup="intNum(this)">
							</li>
							<li class="pro-cu">
								<input id="proTerm" type="text" placeholder="有效期" class="term required" onkeyup="intNum(this)">
								<i>月</i>
							</li>
							<li class="pro-per">
								<textarea class="pro-brief" placeholder="简介"></textarea>
							</li>
						</ul>	
					</div>
				</div>
				<h3>
					<span>折扣优惠</span>
				</h3>
				<div class="d-recharge">
					<div class="recharge">
						<div class="sub-con">
							<div class="test-check">
								<input type="checkbox" class="ck">
								<div class="check">
									<span></span>
								</div>
							</div>
						</div>
						<em>充值</em>
					</div>
					<!-- <div class="re-write">
						<span>超过:</span>
						<em>20</em>
						<i>件</i>
						<span>折扣为:</span>
						<em>90</em>
						<i>%</i>
						<div class="comm-del">删除</div>	
					</div> -->
					<div class="re-add">
						<span>超过</span>
						<input type="text" onkeyup="intNum(this)">
						<i>件</i>
						<input type="text" onkeyup="intNum(this)">
						<i>%</i>
						<div class="comm-add">
							<span>添加</span>
						</div>
					</div>
				</div>
				<div class="dis-time">
					<div class="d-time">
						<div class="sub-con">
							<div class="test-check">
								<input type="checkbox" class="ck">
								<div class="check">
									<span></span>
								</div>
							</div>
						</div>
						<em>折扣时间</em>
					</div>
					<!-- <div class="re-write">
						<span>开始时间:</span>
						<em>2010-12-13</em>
						
						<span>开始时间:</span>
						<em>2010-12-16</em>
						<span>折扣为:</span>
						<strong>90</strong>
						<i>%</i>
						<div class="comm-del">删除</div>	
					</div> -->
					<div class="re-add">
						<div class="date-box1">
							<input type="text" class="date-list1" readOnly="true" placeholder="年月日">
						</div>
						<b> - </b>
						<div class="date-box2">
							<input type="text" class="date-list2" readOnly="true" placeholder="年月日">
						</div>
						<input type="text" class="discount" onkeyup="intNum(this)">
						<i>%(1-99整数)</i>
						<div class="comm-add">
							<span>添加</span>
						</div>
					</div>
				</div>
				<div class="discount-sub">保存</div>
			</div>
		</div>
	</div>
	<script src="../js/common.js"></script>
	<script>
		$(function(){
			$('.date-list1').date_input();
			$(".date-list2").date_input();
			$(".date-input").date_input();
		});
		$('.date-list2').on("click", function() {
			updateT1();
			$('.nav span').on("click", function() {
				if ($(this).parent().parent().parent().prev().attr("class") == "date-list2") {
					updateT1();
				};
			});
		});
		$('.date-list1').on("click", function() {
			updateT2();
			$('.nav span').on("click", function() {
				if ($(this).parent().parent().parent().prev().attr("class") == "date-list1") {
					updateT2();
				};
			});
		});


/**************  合并放入common.js *****/		
		// 商品详情 
		$(".pro-curr li").on("click", function() {
			if ($(this).text() == "课程商品") {
				$(".term").addClass("required");
				$(".pro-cu .list-box").addClass("pro-req");
				$(".pro-per .list-box").removeClass("pro-req");
				$(".spec input").addClass("required");
				$(".pro-cu").css({
					"display" : "block"
				});
				$(".pro-per").css({
					"display" : "none"
				});
			} else {
				$(".spec input").removeClass("required");
				$(".term").removeClass("required");
				$(".pro-cu .list-box").removeClass("pro-req");
				$(".pro-per .list-box").addClass("pro-req");
				$(".pro-cu").css({
					"display" : "none"
				});
				$(".pro-per").css({
					"display" : "block"
				});
			}
		});
		$(".commodity-type li").on("click", function() {
			if ($(this).text() == "次卡") {
				$(".spec i").text("次");
			} else if ($(this).text() == "年卡") {
				$(".spec i").text("年");
			} else if ($(this).text() == "月卡") {
				$(".spec i").text("月");
			} else {
				$(".spec i").text("课时");
			}
		})
		$(".pro-i li").on("click", function() {
			$(this).parent().parent().find("span").attr("data_id", $(this).attr("data_id"));
		})
		$(".d-recharge .comm-add").on("click", function() {
			var canAdd = true;
			if ($(this).parent().children("input").eq(0).val() != "") {
				
				$(this).parent().children("input").eq(0).css({
					"border" : "1px solid #9ea0b7"
				});
			} else {
				canAdd = false;
				$(this).parent().children("input").eq(0).css({
					"border" : "1px solid #ff5a60"
				});
			}
			if ($(this).parent().children("input").eq(1).val() != "" && $(this).parent().children("input").eq(1).val() < 100) {
				
				$(this).parent().children("input").eq(1).css({
					"border" : "1px solid #9ea0b7"
				});
			} else {
				canAdd = false;
				$(this).parent().children("input").eq(1).css({
					"border" : "1px solid #ff5a60"
				});
			}
			if (canAdd) {
				$(this).parent().before($("<div class='re-write'><span>超过:</span><em>" + $(this).parent().children('input').eq(0).val() + "</em><i>件</i><span>折扣为:</span><em>" + $(this).parent().children('input').eq(1).val() + "</em><i>%</i><div class='comm-del'>删除</div>	</div>)"));
				$(this).parent().parent().find(".re-write").last().prevAll().find(".comm-del").css({
					"display" : "none"
				})
				$(this).parent().children("input").eq(0).val("");
				$(this).parent().children("input").eq(1).val("");
			};
			$(".d-recharge .comm-del").on("click", function() {
				$(this).parent().parent().find(".re-write").last().prev(".ct-write").find(".comm-del").css({
					"display" : "block"
				})
				$(this).parent().remove();
			})
		});
		$(".dis-time .comm-add").on("click", function() {
			var canAdd = true;
			if ($(this).parent().find("input").eq(0).val() != "") {
				
				$(this).parent().find("input").eq(0).css({
					"border" : "1px solid #9ea0b7"
				});
			} else {
				canAdd = false;
				$(this).parent().find("input").eq(0).css({
					"border" : "1px solid #ff5a60"
				});
			}
			if ($(this).parent().find("input").eq(1).val() != "") {
				
				$(this).parent().find("input").eq(1).css({
					"border" : "1px solid #9ea0b7"
				});
			} else {
				canAdd = false;
				$(this).parent().find("input").eq(1).css({
					"border" : "1px solid #ff5a60"
				});
			}
			if ($(this).parent().find("input").eq(2).val() != "" && $(this).parent().find("input").eq(2).val() < 100) {
				
				$(this).parent().find("input").eq(2).css({
					"border" : "1px solid #9ea0b7"
				});
			} else {
				canAdd = false;
				$(this).parent().find("input").eq(2).css({
					"border" : "1px solid #ff5a60"
				});
			};
			if (canAdd) {
				$(this).parent().before($("<div class='re-write'><span>开始时间:</span><em>" + $(this).parent().find('input').eq(0).val() + "</em><span>结束时间:</span><em>" + $(this).parent().find('input').eq(1).val() + "</em><span>折扣为:</span><strong>" + $(this).parent().find('input').eq(2).val() + "</strong><i>%</i><div class='comm-del'>删除</div></div>)"));
				$(this).parent().parent().find(".re-write").last().prevAll().find(".comm-del").css({
					"display" : "none"
				})
				$(this).parent().find("input").eq(0).val("");
				$(this).parent().find("input").eq(1).val("");
				$(this).parent().find("input").eq(2).val("");
			};
			$(".dis-time .comm-del").on("click", function() {
				$(this).parent().parent().find(".re-write").last().prev(".ct-write").find(".comm-del").css({
					"display" : "block"
				})
				$(this).parent().remove();
			})
		})
		$(".discount-sub").on("click", function() {
			console.log(productSet());
			if (productSet()) {
				var postJson = {
				   	"goods" : [{
				      	"goods_type" : $(".pro-curr").find("span").text(),
				      	// "goods_info" : $(".cb-box .list-box").eq(1).find("span").text(),
				      	"name" : $("#proName").val(),
				      	"price" : $("#proPrice").val(),
				     	"discounts" : []//折扣优惠
					}]
				};
				if ($(".pro-curr span").text() == "课程商品") {
					postJson.goods[0].goods_info = $(".pro-cu .list-box span").attr("data_id");
					postJson.goods[0].amount = $("#proSpec").val();
					postJson.goods[0].month_of_validity = $("#proTerm").val();
				} else {
					postJson.goods[0].goods_infoo = $(".pro-per .list-box span").attr("data_id");
					if ($(".pro-brief").val() != "") {
						postJson.goods[0].remark = $(".pro-brief").val();
					};
				}
				if ($("#proStock").val() != "") {
					postJson.goods[0].stock = $("#proStock").val();
				};
				if ($(".d-recharge .ck").attr("checked") == "checked" && $(".d-recharge .re-write").length > 0) {
					for (var i = 0; i < $(".d-recharge .re-write").length; i++) {
						var disRecharge = {};
						disRecharge.type = "数量优惠";
						disRecharge.amount = $($(".d-recharge .re-write")[i]).find("em").eq(0).text();
						disRecharge.percent = $($(".d-recharge .re-write")[i]).find("em").eq(1).text();
						postJson.goods[0].discounts.push(disRecharge);
					};
				};
				if ($(".dis-time .ck").attr("checked") == "checked" && $(".dis-time .re-write").length > 0) {
					for (var i = 0; i < $(".dis-time .re-write").length; i++) {
						var disTime = {};
						disTime.type = "时间优惠";
						disTime.begin_at = $($(".dis-time .re-write")[i]).find("em").eq(0).text();
						disTime.end = $($(".dis-time .re-write")[i]).find("em").eq(1).text();
						disTime.percent = $($(".dis-time .re-write")[i]).find("strong").text();
						postJson.goods[0].discounts.push(disTime);
					};
				};
				console.log(postJson);
			};
		})
				// 验证是否必填
		function productSet() {
			var writeIn = true;
			for (var i = 0; i < $(".pro-box .required").length; i++) {
				if ($($(".required")[i]).val() == "") {
					$($(".required")[i]).css({
						"border" : "1px solid #ff5a60" 
					});
					writeIn = false;
				} else {
					$($(".required")[i]).css({
						"border" : "1px solid #9ea0b7" 
					});
				}
			}
			for (var i = 0; i < $(".pro-req").length; i++) {
				if ($($(".pro-req")[i]).attr("choice") == "mandatory") {
					$($(".pro-req")[i]).next("b").css({
						"display" : "inline"
					})
					writeIn = false;
				}
			}
			return writeIn;
		}
	</script>
</body>
</html>